<template>
  <div :class="classes" @click.stop="check" :style="wraperStyles">
    <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
    <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
    <e-icon
      v-if="closable"
      :class="iconClass"
      :color="lineColor"
      type="close"
      @click.stop="close"
    ></e-icon>
    <!-- <e-icon type="close"> </e-icon> -->
  </div>
</template>

<script setup>
import { computed, ref,watch } from 'vue'
import { oneOf } from "../../utils/assist"
import eIcon from "../icon/icon"
const prefixCls = 'haloe-tag';
const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
const props=defineProps({
  closable: {
    type: Boolean,
    default: false
  },
  checkable: {
    type: Boolean,
    default: false
  },
  checked: {
    type: Boolean,
    default: true
  },
  color: {
    type: String,
    default: 'default'
  },
  type: {
    validator (value) {
      return oneOf(value, ['border', 'dot']);
    }
  },
  name: {
    type: [String, Number]
  },
  // 4.0.0
  size: {
    validator (value) {
      return oneOf(value, ['default', 'medium', 'large']);
    },
    default: 'default'
  },
  dark: {
    type: Boolean,
    default:false
  },
  aniamation: {
    type: Boolean,
    default: false
  },
  disabled:{
    type: Boolean,
    default: false
  }
})

defineOptions({
  name: 'Tag'
})

let isChecked = ref(props.checked)
const isCircle=props.type==='circle'
const classes=computed( ()=> {
  return [
    `${prefixCls}`,
    `${prefixCls}-size-${props.size}`,
    {
      [`${prefixCls}-${props.color}`]: !!props.color && oneOf(props.color, initColorList),
      [`${prefixCls}-${props.type}`]: !!props.type,
      [`${prefixCls}-closable`]: props.closable,
      [`${prefixCls}-checked`]: isChecked.value,
      [`${prefixCls}-checkable`]: props.checkable,
      [`${prefixCls}-dark`]: props.dark,
      [`${prefixCls}-disabled`]:props.checkable&&props.disabled
    }
  ];
})

// const animationCls=computed(()=>{
//   return {
//     [`${prefixCls}-aniamation`]:props.aniamation
//   }
// })
const defaultTypeColor=computed (()=> {
  return (props.type !== 'dot' && props.type !== 'border') ? (props.color !== undefined ? (oneOf(props.color, initColorList) ? '' : props.color) : '') : '';
})



const textClasses=computed( ()=> {
  return [
    `${prefixCls}-text`,
    props.type === 'border' ? (oneOf(props.color, initColorList) ? `${prefixCls}-color-${props.color}` : '') : '',
    (props.type !== 'dot' && props.type !== 'border' && props.color !== 'default') ? (isChecked.value && colorList.indexOf(props.color) < 0 ? `${prefixCls}-color-white` : '') : '',
  ];
})

const dotClasses = computed(() => {
  return [
    `${prefixCls}-dot-inner`,
    {
      [`${prefixCls}-aniamation`]:props.aniamation
    }
  ]
  // return props.aniamation? `${prefixCls}-aniamation`: `${prefixCls}-dot-inner`;
})

const iconClass =computed(()=> {
  if (props.type === 'dot') {
    return '';
  } else if (props.type === 'border') {
    return oneOf(props.color, initColorList) ? `${prefixCls}-color-${props.color}` : '';
  } else {
    return props.color !== undefined ? (props.color === 'default' ? '' : 'rgb(255, 255, 255)') : 'rgb(255, 255, 255)';
  }
})

const showDot=computed(()=> {
  return !!props.type && props.type === 'dot';
})

const  lineColor=computed(()=> {
  if (props.type === 'dot') {
    return '';
  } else if (props.type === 'border') {
    return props.color !== undefined ? (oneOf(props.color, initColorList) ? '' : props.color) : '';
  } else {
    return (props.color !== undefined &&props.color === 'default')? 'rgb(255, 255, 255)' : '';
    // return props.color !== undefined ? (props.color === 'default' ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 255)') : '';
  }
})

const borderColor=computed(()=> {
  return props.color !== undefined ? (props.color === 'default' ? '' : props.color) : '';
})
const dotColor=computed(()=> {
  return props.color !== undefined ? (oneOf(props.color, initColorList) ? '' : props.color) : '';
})
const textColorStyle= (()=> {
  return oneOf(props.color, initColorList) ? {} : ((props.type !== 'dot' && props.type !== 'border') ? (isChecked.value ? {color: lineColor} : {}) : {color: lineColor});
})
const bgColorStyle=computed(()=> {
  return oneOf(props.color, initColorList) ? {} : {background: dotColor};
})

watch(()=>props.checked,(val) => {
  isChecked.value = val;
})
const wraperStyles=computed(()=> {
  return oneOf(props.color, initColorList) ? {} : {background: isChecked.value ? defaultTypeColor.value : 'transparent', borderWidth: '0px', borderStyle: 'solid', borderColor: ((props.type !== 'dot' && props.type !== 'border' && isChecked.value) ? borderColor : lineColor), color: lineColor};
})

const emits=defineEmits(['on-close', 'on-change'])
const close = (event) => {
  if (props.name === undefined) {
    emits('on-close', event);
  } else {
    emits('on-close', event, props.name);
  }
};
const check = () => {
  if (!props.checkable || props.disabled) return;
  const checked = !isChecked.value;
  isChecked.value = checked;
  if (props.name === undefined) {
    emits('on-change', checked);
  } else {
    emits('on-change', checked, props.name);
  }
};
</script>
